<template>
  <my-card v-auth="'demo:list'" class="card">
    <h2>公共组件使用</h2>
    <div class="icon-box">
      <span class="iconfont icon-direction-left"></span>
      <span class="iconfont">&#xe675;</span>
      <strong>字体图标使用</strong>
    </div>
    <!-- 筛选条件区 -->
    <Screen :getList="query" />
    <el-button v-auth="'demo:add'" type="primary" @click="operate">添加</el-button>
    <el-button v-auth="'demo:add'" type="primary" @click="test">测试一次执行多个接口</el-button>
    <el-button v-auth="'demo:add'" type="primary" @click="handleTest">登录接口</el-button>
    <el-button v-auth="'demo:add'" type="primary" @click="handleWorkName">获取作业名称</el-button>
    <el-button type="primary" @click="hangleRouterParams">点击进行路由传参</el-button>

    <!-- 列表区 -->
    <div class="table-box">
      <BaseTable :tableObj="tableObj">
        <template v-if="isAuth(['demo:edit', 'demo:delete'])" #default>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button v-auth="'demo:edit'" type="primary" link @click="operate(row)">编辑</el-button>
              <el-button v-auth="'demo:delete'" type="danger" link @click="deleteData(row)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </BaseTable>
      <page v-model:page="pageData.page" v-model:size="pageData.size" :loadList="getList" :total="total"/>
    </div>

    <!-- 新增、编辑弹窗 -->
    <AddOrEdit ref="addOrEditRef" :dialogTitle="dialogTitle" :confirm="handleUplate" />
  </my-card>
</template>

<script lang="ts" setup>
import MyCard from '@/components/card/MyCard.vue'
import BaseTable from '@/components/table/BaseTable.vue'
import Page from '@/components/page/Page.vue'
import Screen from './components/Screen.vue'
import AddOrEdit from './components/AddOrEdit.vue'
import type { PageData } from '@/components/page/type'
import type { ParamsVo } from './components/AddOrEdit.vue'
import type { TableObj } from '@/components/table/types'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { isAuth } from '@/utils/directives/auth/userAuth'
import { testDemo, getWorkName, getMajor } from '@/api/demo/demo'

const params = ref<any>({
  inputValue: '',
  selectValue: '',
  selectValues: []
})
const pageData = reactive<PageData>({
  page: 1,
  size: 10
})

const tableObj = ref<TableObj>({
  tableHeader: [
    { label: '姓名', value: 'name' },
    { label: '性别', value: 'gender' },
    { label: '年龄', value: 'age' },
    { label: '电话', value: 'phone' },
    { label: '地址', value: 'address' }
  ],
  tableData: [
    { id: 1, name: '张三', gender: '男', age: 15, phone: '131......', address: '中国广东珠海' },
    { id: 2, name: '李四', gender: '男', age: 26, phone: '131......', address: '中国广东珠海' },
    { id: 3, name: '王五', gender: '男', age: 45, phone: '131......', address: '中国广东珠海' },
    { id: 4, name: '赵六', gender: '女', age: 18, phone: '131......', address: '中国广东珠海' }
  ]
})
const total = ref<number>(4)
const addOrEditRef = ref<InstanceType<typeof AddOrEdit> | undefined>()
const dialogTitle = ref<string>('新建')

onMounted(() => {})

const test = () => {
  handleTest()
  handleWorkName()
  handleMajor()
}

const handleTest = async () => {
  const res = await testDemo()
  console.log(res)
}

const handleWorkName = async () => {
  const res = await getWorkName()
  console.log(res)
}

const handleMajor = async () => {
  const res = await getMajor()
  console.log(res)
}

// 查询按钮返回的参数
const query = async (value: any) => {
  params.value = {
    inputValue: value.inputValue,
    selectValue: value.selectValue,
    selectValues: value.selectValues
  }
  getList()
}

// 查询列表接口
const getList = async () => {
  const data = {
    inputValue: params.value.inputValue,
    selectValue: params.value.selectValue,
    selectValues: params.value.selectValues,
    page: pageData.page,
    size: pageData.size
  }
  console.log(data)
}

// 新建/编辑
const operate = (row?: ParamsVo) => {
  if (!addOrEditRef.value) return
  if (row) {
    dialogTitle.value = '编辑'
    addOrEditRef.value.params = {
      id: row.id,
      name: row.name,
      gender: row.gender
    }
  } else {
    dialogTitle.value = '新建'
  }
  addOrEditRef.value.dialogFlag = true
}

// 确定新增、编辑
const handleUplate = async (value: ParamsVo) => {
  try {
    const { id } = value
    // id存在为编辑，否则为新增
    id ? console.log('编辑参数：', value) : console.log('添加参数：', value) // 请求对应接口
    ElMessage.success(`${id ? '编辑' : '添加'}成功`)
    addOrEditRef.value?.closedDialog()
    getList()
  } catch (error) {
    console.log('新增/编辑失败，请核查后再操作！')
  }
}

// 删除
const deleteData = async (row: ParamsVo) => {
  const params: { id: number; } = { id: row.id as number }
  console.log(params)
  ElMessage.success('删除成功')
}

const router = useRouter()
const hangleRouterParams = () => {
  router.push({
    path: '/routerParams',
    state: {
      name: '这是路由中传过来的参数'
    }
  })
}

</script>

<style lang="scss" scoped>
  .card {
    margin-bottom: 20px;
    .icon-box {
      font-size: 16px;
      font-weight: 700;
      margin-top: 16px;
      .iconfont {
        margin-right: 5px;
      }
    }
    .table-box {
      margin: 20px 0;
    }
  }
</style>
